<template>
  <div class="mol pb-[1.8rem]">
    <h1 class="mol1 pt-[1.4rem] pb-[.78rem] text-center text-[.38rem] font-[600]">{{ $t('t21') }}</h1>
    <ul class="mol2 flex align-center justify-center gap-[.4rem] list pb-[1.16rem] mb-[0rem!important]">
      <li v-for="item in list" :key="item.id" :class="active===item.id ? 'active' : ''" @click="active=item.id">
        <img v-if="active==item.id" :src="item.activeIcon" alt="">
        <img v-else :src="item.icon" alt="">
        {{ item.label }}
      </li>
    </ul>
    <div v-if="active==1">
      <div class="text-center w-[14rem] mx-auto">
        <h2 class="text-[.3rem] leading-[.45rem] font-[500] mb-[.18rem]">{{ $t('t46') }}</h2>
        <div><img class="w-[.44rem] h-[.44rem] mb-[.56rem] mx-auto" src="@/assets/22.svg" alt=""></div>
        <div class="mol3 px-[.2rem] flex items-center justify-between py-[.8rem] bg-[rgba(255,255,255,0.9)] rounded-[.5rem] border-1 border-[#459EFF] shadow text-center text-[.24rem]">
          <div class="relative w-[2.6rem]">
            <img class="w-[1.2rem] h-[1.2rem] mx-auto" src="@/assets/412.svg" alt="">
            <div class="absolute w-full top-[1.34rem]">用户</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[1.2rem] h-[1.2rem] mx-auto" src="@/assets/42.svg" alt="">
            <div class="absolute w-full top-[1.34rem]">MBpay</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[1.2rem] h-[1.2rem] mx-auto" src="@/assets/43.svg" alt="">
            <div class="absolute w-full top-[1.34rem]">扫码快捷支付</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[1.2rem] h-[1.2rem] mx-auto" src="@/assets/44.svg" alt="">
            <div class="absolute w-full top-[1.34rem]">MBpay API及工具</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[1.2rem] h-[1.2rem] mx-auto" src="@/assets/42.svg" alt="">
            <div class="absolute w-full top-[1.34rem]">商家收款MB</div>
          </div>
        </div>
        <h2 class="text-[.3rem] leading-[.45rem] font-[500] mb-[.18rem] pt-[1.2rem]">{{ $t('t47') }}</h2>
        <div><img class="w-[.44rem] h-[.44rem] mb-[.56rem] mx-auto" src="@/assets/22.svg" alt=""></div>
        <div class="panel mol4">
          <div class="mol4-1 flex items-center justify-between">
            <div class="text-left">
              <div class="text-[#006EF9] text-[.4rem] leading-[.6rem] font-medium">全平台支持SDK</div>
              <div class="text-[.24rem] leading-[.46rem] mt-[.26rem] mb-[.4rem]">满足您全部的APP或者网站需求<br/>通过SDK一键集成至您的软件，快速使您的产品拥有MB币收款能力</div>
              <div class="flex items-center gap-[.6rem]">
                <img src="@/assets/k1.svg" class="w-[.78rem] h-[.78rem]" alt="">
                <img src="@/assets/k2.svg" class="w-[.78rem] h-[.78rem]" alt="">
                <img src="@/assets/k3.svg" class="w-[.78rem] h-[.78rem]" alt="">
              </div>
            </div>
            <div class="btn">资源下载<img src="@/assets/arrow-down.svg" alt=""></div>
          </div>
        </div>
        <div class="panel mol4 mt-[.8rem]">
          <div class="mol4-1 flex items-center justify-between">
            <div class="text-left">
              <div class="text-[#006EF9] text-[.4rem] leading-[.6rem] font-medium">高度定制化API接口</div>
              <div class="text-[.24rem] leading-[.46rem] mt-[.26rem] mb-[.4rem]">我们提供非常丰富的API，以满足您各种定制化需求<br/>您的技术人员可以通过阅读我们提供的在线技术文档，开发出专属<br/>您自己的业务方案。</div>
            </div>
            <div class="btn">开发文档<img src="@/assets/code.svg" alt=""></div>
          </div>
        </div>
        <div class="panel mol4 mt-[.8rem]">
          <div class="mol4-1 flex items-center justify-between">
            <div class="text-left">
              <div class="text-[#006EF9] text-[.4rem] leading-[.6rem] font-medium">商户管理平台</div>
              <div class="text-[.24rem] leading-[.46rem] mt-[.26rem] mb-[.4rem]">管理自己的MB币<br/>您可在商户管理平台完成运营情况监控、财务对账、MB币充值、<br/>提现等操作。</div>
            </div>
          </div>
        </div>
        <h2 class="text-[.3rem] leading-[.45rem] font-[500] mb-[.18rem] pt-[.72rem]">快速集成</h2>
        <div><img class="w-[.44rem] h-[.44rem] mb-[.56rem] mx-auto" src="@/assets/22.svg" alt=""></div>
        <div class="mol3 px-[.2rem] flex items-center justify-between py-[.8rem] bg-[rgba(255,255,255,0.9)] rounded-[.5rem] border-1 border-[#459EFF] shadow text-center text-[.24rem]">
          <div class="relative w-[2.6rem]">
            <img class="w-[.7rem] h-[.7rem] mx-auto" src="@/assets/51.svg" alt="">
            <div class="absolute w-full top-[.9rem]">提交申请</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[.7rem] h-[.7rem] mx-auto" src="@/assets/52.svg" alt="">
            <div class="absolute w-full top-[.9rem]">等待商务联系</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[.7rem] h-[.7rem] mx-auto" src="@/assets/53.svg" alt="">
            <div class="absolute w-full top-[.9rem]">签约合同</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[.7rem] h-[.7rem] mx-auto" src="@/assets/54.svg" alt="">
            <div class="absolute w-full top-[.9rem]">交付物</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[.7rem] h-[.7rem] mx-auto" src="@/assets/55.svg" alt="">
            <div class="absolute w-full top-[.9rem]">技术支持</div>
          </div>
          <img src="@/assets/right2.svg" class="h-[.36rem] arrow" alt="">
          <div class="relative w-[2.6rem]">
            <img class="w-[.7rem] h-[.7rem] mx-auto" src="@/assets/56.svg" alt="">
            <div class="absolute w-full top-[.9rem]">完成上线</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="active==2">
      <div class="text-center w-[14rem] mx-auto">
        <h2 class="text-[.3rem] leading-[.45rem] font-[500] mb-[.18rem]">{{ $t('t32') }}</h2>
        <div><img class="w-[.44rem] h-[.44rem] mb-[.56rem] mx-auto" src="@/assets/22.svg" alt=""></div>
        <ul class="mol5 mb-[1rem] flex justify-center gap-[.25rem] items-center">
          <li v-for="item in list2" :key="item.id" class="item rounded-[.3rem] pt-[.5rem] pb-[.45rem] flex-1 bg-white">
            <div><img :src="item.icon" alt="" class="w-[1.4rem] h-[1.4rem] mx-auto"></div>
            <h3 class="text-[.3rem] leading-[.45rem] font-[500] text-[#006EF9] my-[.12rem]">{{ item.title }}</h3>
            <p class="text-[.2rem] leading-[.3rem] text-[#000] font-[500]">{{ item.desc }}</p>
          </li>
        </ul>
        <h2 class="text-[.3rem] leading-[.45rem] font-[500] mb-[.18rem]">{{ $t('t33') }}</h2>
        <div><img class="w-[.44rem] h-[.44rem] mb-[.56rem] mx-auto" src="@/assets/22.svg" alt=""></div>
        <ul class="mol5 flex justify-center gap-[.25rem] items-center">
          <li v-for="item in list3" :key="item.id" class="item rounded-[.3rem] pt-[.5rem] pb-[.45rem] flex-1 bg-white">
            <div><img :src="item.icon" alt="" class="w-[1.4rem] h-[1.4rem] mx-auto"></div>
            <h3 class="text-[.3rem] leading-[.45rem] font-[500] text-[#006EF9] my-[.12rem]">{{ item.title }}</h3>
            <p class="text-[.2rem] leading-[.3rem] text-[#000] font-[500]">{{ item.desc }}</p>
          </li>
        </ul>
      </div>
      <div class="mol6 card mt-[-.6rem] pt-[2.22rem]">
        <div class="w-[14rem] mx-auto py-[.8rem] bg-[rgba(255,255,255,0.9)] rounded-[.5rem] border-1 border-[#459EFF] shadow">
          <div class="text-center">
            <img src="@/assets/21.svg" alt="" class="w-[2rem] h-[2rem] mx-auto">
            <h3 class="text-[#006EF9] text-[.4rem] mt-[.4rem] leading-[.6rem]">{{ $t('t30') }}</h3>
            <p class="text-[.24rem] leading-[.46rem] mt-[.18rem]">{{ $t('t31') }}</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="active==3" class="mol7">
      <div class="w-[14rem] mx-auto py-[.8rem] bg-[rgba(255,255,255,0.9)] rounded-[.5rem] border-1 border-[#459EFF] shadow">
        <div class="text-center">
          <img src="@/assets/31.svg" alt="" class="w-[2rem] h-[2rem] mx-auto">
          <p class="text-[.24rem] leading-[.46rem] mt-[.56rem] mb-[.32rem]">{{ $t('t27') }}<br/>{{ $t('t29') }}</p>
          <h3 class="text-[#006EF9] text-[.4rem]">{{ $t('t26') }}</h3>
        </div>
      </div>
    </div>
    <div v-if="active==4" class="mol7">
      <div class="w-[14rem] mx-auto py-[.8rem] bg-[rgba(255,255,255,0.9)] rounded-[.5rem] border-1 border-[#459EFF] shadow">
        <div class="text-center">
          <img src="@/assets/41.svg" alt="" class="w-[2rem] h-[2rem] mx-auto">
          <p class="text-[.24rem] leading-[.46rem] mt-[.56rem] mb-[.32rem]">{{ $t('t28') }}<br/>{{ $t('t29') }}</p>
          <h3 class="text-[#006EF9] text-[.4rem]">{{ $t('t26') }}</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const active = ref(1);

const getImage = (docName) => {
  return new URL(`../assets/${docName}`, import.meta.url).href;
};

const list = ref([
  { id: 1, label: t('t22'), icon: getImage('1.svg'), activeIcon: getImage('1s.svg') },
  { id: 2, label: t('t23'), icon: getImage('2.svg'), activeIcon: getImage('2s.svg') },
  { id: 3, label: t('t24'), icon: getImage('3.svg'), activeIcon: getImage('3s.svg') },
  { id: 4, label: t('t25'), icon: getImage('4.svg'), activeIcon: getImage('4s.svg') },
]);

const list2 = ref([
  { id: 1, icon: getImage('23.svg'), title: t('t34'), desc: t('t35') },
  { id: 2, icon: getImage('24.svg'), title: t('t36'), desc: t('t37') },
  { id: 3, icon: getImage('25.svg'), title: t('t38'), desc: t('t39') },
]);

const list3 = ref([
  { id: 1, icon: getImage('26.svg'), title: t('t40'), desc: t('t41') },
  { id: 2, icon: getImage('27.svg'), title: t('t42'), desc: t('t43') },
  { id: 3, icon: getImage('28.svg'), title: t('t44'), desc: t('t45') },
]);
</script>

<style scoped lang="less">
.list {
  li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    width: 2.42rem;
    height: .72rem;
    border-radius: .36rem;
    color: #333;
    font-size: .26rem;
    cursor: pointer;
    &.active {
      color: #fff;
      background: #006EF9;
    }
    img {
      width: .44rem;
      height: .44rem;
    }
  }
}
.shadow {
  box-shadow: 0px .1rem .2rem 0px rgba(69,158,255,0.1);
}
.item {
  box-shadow: 0px 0.09rem 0.05rem 1px rgba(30,87,193,0.1);
}
.card {
  background: url('@/assets/card-bg.svg') center 0 no-repeat;
  background-size: 100% auto;
}
.panel {
  background: rgba(255,255,255,0.9);
  box-shadow: 0px .1rem .2rem 0px rgba(69,158,255,0.1);
  border-radius: .5rem;
  padding: 1rem .6rem;
  border: 1px solid #459EFF;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .12rem .4rem;
  background: #006EF9;
  border-radius: .3rem;
  color: #fff;
  font-size: .2rem;
  font-weight: 600;
  img {
    width: .32rem;
    height: .32rem;
  }
}
</style>

<style lang="less" scoped>
@media (max-width: 600px) {
  .mol {
    .mol1 {
      margin-bottom: .1rem;
    }
    .mol2 {
      padding: 0 .4rem .4rem;
      img {
        display: none;
      }
    }
    .mol3 {
      flex-direction: column;
      margin: 0 .4rem;
      .arrow {
        margin: .8rem 0 .4rem;
        transform: rotate(90deg);
      }
    }
    .mol4 {
      margin-left: .4rem;
      margin-right: .4rem;
      padding: .5rem .6rem;
      .mol4-1 {
        flex-direction: column;
        .btn {
          margin-top: .3rem;
        }
      }
    }
    .mol5 {
      flex-direction: column;
      padding: 0 .4rem;
      li {
        width: 100%;
      }
    }
    .mol6 {
      padding: 1rem .4rem 0 .4rem;
    }
    .mol7 {
      padding: 0 .4rem;
    }
  }
}
</style>